<template>
	<view class="container">
		<view class="search">
			<uni-row
				style="margin-bottom: 10rpx; display: flex; align-items: center"
			>
				<uni-col :span="24">
					<uni-datetime-picker
						type="range"
						v-model="queryParams.planExecuteDate"
						@change="handelChange"
						start-placeholder="选择计划执行开始日期"
						end-placeholder="选择计划执行结束日期"
					/>
				</uni-col>
				<!-- <uni-col :span="4">
					<headerScreening
						:labelWidth="'140rpx'"
						ref="headerSearch"
						:formColumns="formColumns"
						@headerScreeningSubmit="headerScreeningSubmit"
					></headerScreening>
				</uni-col> -->
			</uni-row>
		</view>
		<scroll-view
			class="scroll-view"
			scroll-y
			@scrolltolower="handleScrollToLower"
		>
			<uni-card v-for="(item, index) in equipmentList" :key="index">
				<view
					style="display: flex; align-items: center"
					@click.stop="handlerExecute(item)"
				>
					<view>
						<uni-tag
							:text="item.desc"
							:custom-style="getTagStyle('精度点检')"
						></uni-tag>
						<order-tag
							class="arrow-button"
							:orderStatus="item.orderStatus"
						/>
					</view>

					<view>
						<view class="header">
							<view class="title">
								<view class="code">{{ item.planCode }}</view>
							</view>
						</view>
						<view class="right-edit">
							<button
								size="mini"
								type="primary"
								@click.stop="handlerExecute(item)"
							>
								执行
							</button>
							<button
								v-if="false"
								size="mini"
								@click.stop="inputDialogToggle(item)"
							>
								关闭
							</button>
						</view>
						<desc-content
							style="width: 75%"
							:columns="columns"
							:data="item"
						></desc-content>
					</view>
				</view>
			</uni-card>
			<page-loading style="padding-top: 30rpx" :status="loadingStatus" />
		</scroll-view>
		<lmm-popup :visible.sync="showPopup" position="center" @close="onClose">
			<view class="popup-content">
				<view class="custom-modal">
					<view class="title">关闭工单</view>
					<input v-model="reason" placeholder="请输入关闭原因" />
					<text class="error" v-show="showError">请输入关闭原因</text>
					<view class="buttons">
						<button @click="onClose">取消</button>
						<button type="primary" @click="confirmClose">
							确定
						</button>
					</view>
				</view>
			</view>
		</lmm-popup>
	</view>
</template>

<script>
import { getTagStyle } from '@/utils/common.js';
import { getAccuracyCheckList, checkClose } from '@/api/check.js';
import { cycleTypeList } from '@/constants/common.js';
export default {
	data() {
		return {
			currentRecord: {},
			reason: '',
			showError: false,
			showPopup: false,
			title: '',
			range: [],
			dataTree: [],
			// 表单参数
			columns: [
				{
					title: '区域',
					dataIndex: 'areaName',
					span: 2,
				},
				{
					title: '计划执行开始日期',
					dataIndex: 'startDate',
					span: 2,
				},
				{
					title: '计划执行结束日期',
					dataIndex: 'endDate',
					span: 2,
				},
				{
					title: '执行班组',
					dataIndex: 'classes',
					span: 2,
				},
				{
					title: '执行人员',
					dataIndex: 'executeName',
					span: 2,
				},
				{
					title: '周期类别',
					dataIndex: 'cycleType',
					span: 2,
					valueType: 'select',
					options: cycleTypeList,
				},
			],
			equipmentList: [],
			// 查询参数
			queryParams: {
				current: 1,
				size: 10,
			},
			total: 0,
			loadingStatus: 'more',
			scrollQuery: false,
			formDisabled: false,
			executeType: '',
			selectRow: {},
			formData3: {},
			isTG: [
				{
					text: '通过',
					value: '通过',
				},
				{
					text: '不通过',
					value: '不通过',
				},
			],
			customRules: {
				result: {
					rules: [
						{
							required: true,
							errorMessage: '请选择验收结果',
						},
					],
				},
			},
		};
	},
	computed: {
		formColumns() {
			return [
				{
					label: '是否逾期',
					prop: 'expected',
					formType: 'select',
					options: [],
				},
				{
					label: '工单编码',
					prop: 'orderCode',
				},
				{
					label: '工单名称',
					prop: 'orderName',
				},
				{
					label: '请求人员',
					prop: 'createBy',
				},
				{
					label: '请求时间',
					prop: 'createTime',
					formType: 'date',
				},
			];
		},
	},
	onShow() {
		this.scrollQuery = false;
		this.$refs.headerSearch?.handlerResetFields();
		this.queryParams = {
			current: 1,
			size: 10,
		};
		const userInfor = uni.getStorageSync('userInfor');
		console.log('userInfor', userInfor);
		this.getList();
	},
	methods: {
		getTagStyle: getTagStyle,
		handelChange() {
			this.scrollQuery = false;
			this.queryParams.current = 1;
			this.getList({
				...this.queryParams,
				current: 1,
				size: 10,
			});
		},
		headerScreeningSubmit(forVal) {
			this.scrollQuery = false;
			this.queryParams = {
				...this.queryParams,
				...forVal,
			};
			this.handelChange();
		},
		handleShowNoMore(data, total) {
			if (data?.length === total) {
				this.loadingStatus = 'noMore';
			}
		},
		handleScrollToLower() {
			if (this.loadingStatus === 'noMore') {
				return;
			}
			this.scrollQuery = true;
			this.queryParams.current = this.queryParams.current + 1;
			this.getList(this.queryParams);
		},
		async getList(
			form = {
				current: 1,
				size: 10,
			},
		) {
			const userInfor = uni.getStorageSync('userInfor');
			const newParams = {
				...form,
				startDate: form?.planExecuteDate?.[0],
				endDate: form?.planExecuteDate?.[1],
				userNumber: userInfor.number,
				type: 2, // 1 功能 2 生产 3 设备
				planExecuteDate: undefined,
			};
			this.loadingStatus = 'loading';
			const res = await getAccuracyCheckList(newParams);
			const { data } = res || {};
			const newList = data.records || [];
			const total = data.total || 0;
			this.total = total;
			this.loadingStatus = 'more';
			if (this.scrollQuery) {
				this.equipmentList = [...this.equipmentList, ...newList];
				this.handleShowNoMore(this.equipmentList, total);
			} else {
				this.equipmentList = [...newList];
				this.handleShowNoMore([...newList], total);
			}
		},
		handlerExecute(row, item) {
			this.formDisabled = false;
			uni.navigateTo({
				url:
					'/pages/jdscCheck/executeItem/index?data=' +
					JSON.stringify(row),
			});
		},
		inputDialogToggle(record) {
			this.showPopup = true;
			this.reason = '';
			this.showError = false;
			this.currentRecord = record;
		},
		confirmClose() {
			if (!this.reason) {
				this.showError = true;
				setTimeout(() => (this.showError = false), 2000);
				return;
			}
			const userInfor = uni.getStorageSync('userInfor');
			checkClose({
				closeReason: this.reason,
				planCode: this.currentRecord.planCode,
				userId: userInfor.userId,
			}).then((res) => {
				if (res.code === 200) {
					this.showPopup = false;
					uni.showToast({
						title: '关闭成功',
						icon: 'success',
					});
					this.reset();
				}
			});
		},
		onClose() {
			this.showPopup = false;
			this.reason = '';
			this.showError = false;
		},
		reset() {
			this.scrollQuery = false;
			this.equipmentList = [];
			this.queryParams = {
				...this.queryParams,
				current: 1,
				size: 10,
			};
			this.getList(this.queryParams);
		},
	},
};
</script>

<style scoped lang="scss">
.container {
	display: flex;
	flex-direction: column;

	.filter-warp {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 8px;
	}

	.scroll-view {
		.date {
			padding: 0 10rpx;
			border: 1px solid #16a7f0;
			border-radius: 10rpx;
			font-size: 24rpx;
			color: #16a7f0;
		}
	}
}

::v-deep .uni-card .uni-card__content {
	padding: 10px 0 !important;
}

::v-deep .uni-card--border {
	padding: 0 0 0 5px !important;
}

.right-edit {
	position: absolute;
	right: 0;
	top: 0rpx;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-direction: column;
	height: 100%;
	z-index: 9;

	button {
		margin-bottom: 6rpx;

		&:nth-of-type(5) {
			margin-bottom: 0;
		}
	}
}

.arrow-button {
	left: 0;
	bottom: 20rpx;
	position: absolute;
}

.right-tag {
	width: 100rpx;
	height: 24rpx;
	text-align: center;
	line-height: 26rpx;
	color: #fff;
	font-size: 16rpx;
	background-color: #e8413d;
	right: 0;
	top: 80rpx;
	position: absolute;
	right: -24rpx;
	top: 12rpx;
	transform: rotateZ(45deg);
}

.title {
	font-size: 16px;
	font-weight: bold;
}

.button-group {
	margin-top: 15px;
	display: flex;
	justify-content: space-around;
}

::v-deep .uni-tag {
	padding: 8rpx 10rpx;
}
.custom-modal {
	background: #fff;
	padding: 30rpx;
	border-radius: 10rpx;
	width: 80vw;
	.title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	input {
		border: 1px solid #e0e0e0;
		padding: 20rpx;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
	}

	.error {
		color: #e64340;
		font-size: 24rpx;
		height: 40rpx;
	}

	.buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
	}

	button {
		flex: 1;
		margin: 0 10rpx;
	}
}
</style>
